// this class keeps track of the state of the game
var Display = function(name, id, server, width, height) {
  var log = function(s) {
    window.log('[ display ' + name + ' ] ' + s);
  };
  log('creating Display');
  
  var autowired = [
    'host_game',
    'join_game'
  ];
  
  this.MODES = [
    'none',
    'place_piece',
    'place_edge',
    'place_vertex',
    'my_turn'
  ];
  
  this.state = 'uninitialized';
  this.mode  = 'none';
  this.server = server;
  this.selected_edge_id   = null;
  this.selected_vertex_id = null;
  this.instructions = '';
  
  id && (this.board  = document.getElementById(id));
};

Display.prototype.render_gamelist = function(gamelist) {
  
};

Display.prototype.place_pieces = function() {
  this.mode  = 'place_pieces'; 
  this.state = 'edgeorvertex';
  this.instructions = 'place a settlement and a road.'
};

Display.prototype.my_turn = function() {
  this.mode  = 'my_turn'; 
  this.state = 'edgeorvertex';
  this.instructions = 'its your turn. buy something!';
};

Display.prototype.on_edge_select = function(id) {
  this.clear_selection();
  if (this.mode != 'none') {
    this.selectedEdgeId = id;
    if (this.mode == 'place_pieces') {
      this.mode = 'place_vertex';
    }
    else if (this.mode == 'place_edge') {
      this.mode = 'none';
    }
  }
};

Display.prototype.on_edge_hover = function(id) {
  if (this.mode != 'none') {
    // doedgehover
  }
};

Display.prototype.on_vertex_select = function(id) {
  this.clear_selection();
  if (this.mode != 'none') {
    this.selectedVertexId = id;
    if (this.mode == 'place_pieces') {
      this.mode = 'place_edge';
    }
    else if (this.mode == 'place_vertex') {
      this.mode = 'none';
    }
  }
};

Display.prototype.on_vertex_hover = function(id) {
  if (this.mode != 'none') {
    // dovertexhover
  }
};

Display.prototype.clear_selection = function() {
  this.selected_edge_id   = null;
  this.selected_vertex_id = null;
};

Display.prototype.init_settlement = function() {
  this.server.init_settlement({
    vertex_id: this.selected_vertex_id
  });
};
Display.prototype.init_road = function() {
  this.server.init_road({
    edge_id:   this.selected_edge_id,
  });
};


Display.prototype.buy = function() {
  // eg.
  switch (item) {
    case 'road':
      this.state = 'selectEdge';
      break;
    case 'settlement':
      this.state = 'selectVertex';
    case 'city':
      this.state = 'selectVertex';
      break;
  }
  
  this.server.buy({
    
  });
};

Display.prototype.render = function(context) {
  displayBoard();
};

Display.prototype.host_game = function() {
  this.server.host_game();
};

Display.prototype.join_game = function(game_id) {
  this.server.join_game({ game_id: game_id });
};

Display.prototype.start_game = function() {
  this.server.start_game();
};

Display.prototype.end_turn = function() {
  this.server.end_turn();
}

Display.static_data = null;
